<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" 
    "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="language" content="en" />

        <title>Autoevaluacion Institucional</title>
        <link rel='stylesheet' type='text/css' href='http://assets.getcreditable.com/1.2/css/bundled__v1.2.gz.css' />
        <link rel="stylesheet" type="text/css" href="layout2.css" />
        <link rel="stylesheet" type="text/css" href="style.css" />
        <link rel="stylesheet" type="text/css" href="http://layout.jquery-dev.net/lib/css/themes/base/jquery.ui.all.css" />
        <!-- CUSTOMIZE/OVERRIDE THE DEFAULT CSS -->


        <style>
            #page_header .meta h3 .gridCount {
                color: #999999;
                font-size: 12px;
                letter-spacing: -0.5px;
                line-height: 22px;
                margin-left: 5px;
            }
            #page_header .meta {
                background: none repeat scroll 0 0 transparent;
                float: left;
                margin: 10px 15px 10px 10px;
            }
            #page_header .meta h3 {
                color: #333333;
                font-size: 16px;
                font-weight: bold;
                letter-spacing: -0.5px;
                line-height: 22px;
                margin: 0;
                max-width: 320px;
            }

            #page_header {
                background: url("images/page_header_bg.png") repeat-x scroll left bottom #E9E9E9;
                position: relative;
                width: 100%;
                height: 100%;

            }
            #page_search {
                background: none repeat scroll 0 0 #FFFFFF;
                border: 1px solid #CCCCCC;
                border-radius: 20px 20px 20px 20px;
                display: block;
                height: 22px;
                margin: 0;
                position: relative;
                width: 150px;
                z-index: 9999;
            }

            .page_options {
                float: right;
                height: 22px;
                padding: 9px 10px 10px 0;
                text-align: right;
            }

            #page_search input {
                background: none repeat scroll 0 0 transparent;
                border: medium none;
                color: #999999;
                font-size: 11px;
                left: 9px;
                line-height: 14px;
                margin: 0;
                position: absolute;
                top: 3px;
                width: 116px;
            }

            #page_search a.remove {
                background: url("images/iconos.png") no-repeat scroll center center transparent;
                background-position: -81px 0;
                height: 19px;
                width: 22px;
                position: absolute;
                right: 3px;
                top: 1px;
            }

            .cell-title {
                font-weight: bold;

            }

            .cell-effort-driven {
                text-align: center;

            }

            .cell-selection {
                border-right-color: silver;
                border-right-style: solid;
                background: #f5f5f5;
                color: gray;
                text-align: right;
                font-size: 10px;
            }

            .slick-row.selected .cell-selection {
                background-color: transparent; /* show default selected row background */
            }
        </style>
        <link rel="stylesheet" href="slick.grid.css" type="text/css" media="screen" charset="utf-8" />
        <link rel="stylesheet" href="slick.pager.css" type="text/css" media="screen" charset="utf-8" />
        <link rel="stylesheet" href="jquery-ui-1.8.5.custom.css" type="text/css" media="screen" charset="utf-8" />
        <link rel="stylesheet" href="examples.css" type="text/css" media="screen" charset="utf-8" />
        <link rel="stylesheet" href="slick.columnpicker.css" type="text/css" media="screen" charset="utf-8" />
        <link rel="stylesheet" href="styl.css" type="text/css" media="screen" charset="utf-8" />
        <script language="JavaScript" src="lib/firebugx.js"></script>
        <script language="JavaScript" src="lib/jquery-1.4.3.min.js"></script>
        <script language="JavaScript" src="lib/jquery-ui-1.8.5.custom.min.js"></script>
        <script language="JavaScript" src="lib/jquery.event.drag-2.0.min.js"></script>
        <script language="JavaScript" src="slick.editors.js"></script>
        <script language="JavaScript" src="slick.grid.js"></script>
        <script language="JavaScript" src="slick.model.js"></script>
        <script language="JavaScript" src="slick.pager.js"></script>
        <script language="JavaScript" src="slick.columnpicker.js"></script>
        <script language="JavaScript" src="jjmenu.js"></script>
        <script language="JavaScript" src="pubsub.js"></script>
        


        <style type="text/css">

            /* remove padding and scrolling from elements that contain an Accordion OR a content-div */


            .ui-layout-center ,	/* has content-div */
            .ui-layout-west ,	/* has Accordion */
            .ui-layout-east ,	/* has content-div ... */
            .ui-layout-east .ui-layout-content { /* content-div has Accordion */
                padding: 0px;
                overflow: hidden;
            }
            .ui-layout-center P.ui-layout-content {
                line-height:	1.4em;
                margin:			0; /* remove top/bottom margins from <P> used as content-div */
            }
            /*h3, h4 { /* Headers & Footer in Center & East panes 
                font-size:		1.1em;
                background:		#EEF;
                border:			1px solid #BBB;
                border-width:	0 0 1px;
                padding:		7px 10px;
                margin:			0;
            }*/
            .ui-layout-west h4 { /* Footer in East-pane */
                font-size:		0.9em;
                font-weight:	normal;
                border-width:	1px 0 0;
                overflow: hidden;
            }

            .ui-layout-north {
                /* Drop-Down */
                bottom:		auto;
                margin:		0;
                margin-top:	1.45em;
            }

            .inner-layout-north {
                /* Drop-Down */
                bottom:		auto;
                margin:		0;
                margin-top:	1.45em;
            }
            .ui-layout-pane2 { /* solo header */
                background:	#FFF; 
                /* <<<< ojo comentado por mi >>>>> */
                border: 1px solid #BBB; 


                /* DO NOT add scrolling (or padding) to 'panes' that have a content-div,
                   otherwise you may get double-scrollbars - on the pane AND on the content-div
                */

                padding: 0;
                overflow:	auto;
            }
            .middle-center, .inner-center{
                padding: 0px;   

            }


        </style>

        <!-- REQUIRED scripts for layout widget -->
        <!--      <script type="text/javascript" src="http://layout.jquery-dev.net/lib/js/jquery-latest.js"></script>-->
        <script type="text/javascript" src="http://layout.jquery-dev.net/lib/js/jquery-ui-latest.js"></script>
        <script type="text/javascript" src="http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js"></script>
        <script type="text/javascript" src="http://layout.jquery-dev.net/lib/js/jquery.layout.resizePaneAccordions-1.0.js"></script>
        <script type="text/javascript" src="themeswitchertool.js"></script> 
        <script type="text/javascript" src="http://layout.jquery-dev.net/lib/js/debug.js"></script>


        <script type="text/javascript" src="jquery.jstree.js"></script>
        <script type="text/javascript" src="jquery.hotkeys.js"></script>

      
        
        
        <script type="text/javascript">
            var myLayout, innerLayout, middleLayout;
            $(document).ready( function() {

                myLayout = $('body').layout({
                    
                       
                        west__size:			197
                    ,   center__paneSelector:  ".ui-layout-center"
                    ,   north__paneClass:    "ui-layout-pane2"
                    ,   closable:				true	// pane can open & close
                    ,	resizable:				true	// when open, pane can be resized 
                    ,	slidable:				false	// when closed, pane can 'slide' open over other panes - closes on mouse-out

                    ,   north__slidable:		false	// OVERRIDE the pane-default of 'slidable=true'
                    ,	north__spacing_open:	0		// no resizer-bar when open (zero height)
                    ,	south__resizable:		false	// OVERRIDE the pane-default of 'resizable=true'
                    ,	south__spacing_open:	0		// no resizer-bar when open (zero height)
                    


                    //	some resizing/toggling settings
                    ,	west__minSize:			100
                    ,	west__maxSize:			300
                    
		
                    
		
                
                });
                
 
                
                middleLayout = $('div.ui-layout-center').layout({ 
                    north__paneSelector:    ".middle-north"
                    ,   north__paneClass:    "ui-layout-pane2"
                    ,   center__paneSelector:    ".middle-center"
                    ,	spacing_open:			8  // ALL panes
                    ,	spacing_closed:			8  // ALL panes
                   
                });
                
                innerLayout = $('div.middle-center').layout({ 
                       
                    center__paneSelector:    ".inner-center"
                    ,	spacing_open:			8  // ALL panes
                    ,	spacing_closed:			8  // ALL panes
                    
                    ,   center__onresize: function (name, el, state, opts, Layout) { 
                        $.publish("set_grid_height", [state.innerHeight]);
                        $.publish("set_grid_width", [state.innerWidth]);
                    }
                 
                });
                
                
                
                    
                
                $.publish("set_grid_height", [middleLayout.state.center.innerHeight]);
                $.publish("set_grid_width", [middleLayout.state.center.innerWidth]);
		
		
                // ACCORDION - in the East pane - in a 'content-div'
		

                // THEME SWITCHER
                addThemeSwitcher('.ui-layout-north',{ top: '12px', right: '5px' });
                // if a new theme is applied, it could change the height of some content,
                // so call resizeAll to 'correct' any header/footer heights affected
                // NOTE: this is only necessary because we are changing CSS *AFTER LOADING* using themeSwitcher
                setTimeout( myLayout.resizeAll, 1000 ); /* allow time for browser to re-render with new theme */
         
         
                $("#nodo1").click(function () { 
                    $("#tree").jstree("toggle_node","#nodo1");
                
                });
                $("#nodo2").click(function () { 
                    $("#tree").jstree("toggle_node","#nodo2");
                });
                $("#nodo3").click(function () { 
                    $("#tree").jstree("toggle_node","#nodo3");
                });
        
                
                $("#tree").jstree({ 
            
                    "types" : {
                        "valid_children" : [ "root","create","edit","delete","show"],
                        "types" : {
                            "root" : {
                                "icon" : { 
                                    "image" : "iconos2.png",
                                    "position": "0 -32px"
                                },
                                "valid_children" : [ "default" ],
                                "hover_node" : true,
                                "select_node" : function () {return false;}
                            },
                            "default" : {
                                "valid_children" : [ "default" ]
                            },
                                
                            "create" : {
                                    
                                "icon" : { 
                                    "image" : "iconos2.png",
                                    "position": "0 -48px"
                                    
                                },
                                "valid_children" : [ "default" ]
                            },
                            "edit" : {
                                    
                                "icon" : { 
                                    "image" : "iconos2.png",
                                    "position": "0 -64px"
                                },
                                "valid_children" : [ "default" ]
                            }
                            ,
                            "delete" : {
                                    
                                "icon" : { 
                                    "image" : "iconos2.png",
                                    "position": "0 -80px"
                                },
                                "valid_children" : [ "default" ]
                            }
                            ,
                            "show" : {
                                    
                                "icon" : { 
                                    "image" : "iconos2.png",
                                    "position": "0 -112px"
                                },
                                "valid_children" : [ "default" ]
                            }
                                
                        }
                        
                        
                        
                        
                    },
            
            
                    "ui" : {
                        "select_limit" : 1,
                        "selected_parent_close" : "select_parent",
                        "selected_parent_open": true
			
                    }
                    , "themes" : {
                        "theme" : "default",
                        "dots" : false,
                        "icons" : true,
                        "url": true
                    },
                    "core" : { "initially_open" : [ "nodo1", "nodo2","nodo3" ] }
                    , "plugins" : [ "themes", "html_data","ui","hotkeys","types"]
              
                });
                
                
                
                
               
                
                
                
                
        
            });
        </script>
        
        
        

        <script type="text/javascript">
            var dataView;
            var grid;
            var grid_opts={};
            var data = [];
            var selectedRowIds = [];

            var storyTitleFormatter = function(row, cell, value, columnDef, dataContext) {
                return "<a href='#jqtransform.jsp?" + dataContext["title"] + "' target=_self>" + dataContext["title"] + "</a>";
            };
            
            
            var columns = [
			
                {id:"title", name:"Title", field:"title", minWidth:100, cssClass:"cell-title", editor:TextCellEditor, validator:requiredFieldValidator, sortable:true, formatter:storyTitleFormatter },
                {id:"duration", name:"Duration", field:"duration", minWidth:100, editor:TextCellEditor, sortable:true},
                {id:"%", name:"% Complete", field:"percentComplete", width:150, resizable:false, formatter:GraphicalPercentCompleteCellFormatter, editor:PercentCompleteCellEditor, sortable:true},
                {id:"start", name:"Start", field:"start", minWidth:100, editor:DateCellEditor, sortable:true},
                {id:"finish", name:"Finish", field:"finish", minWidth:100, editor:DateCellEditor, sortable:true},
                {id:"effort-driven", name:"Effort Driven", width:110, resizable:false, cssClass:"cell-effort-driven", field:"effortDriven", formatter:BoolCellFormatter, editor:YesNoCheckboxCellEditor, cannotTriggerInsert:true, sortable:true}
            ];

            var options = {
                editable: false,
                autoEdit: false,
                enableAddRow: false,
                enableCellNavigation: true,
                asyncEditorLoading: false,
                enableColumnReorder: false,
                forceFitColumns: true
                        
            };

            var sortcol = "title";
            var sortdir = 1;
            var percentCompleteThreshold = 0;
            var searchString = "";

            function requiredFieldValidator(value) {
                if (value == null || value == undefined || !value.length)
                    return {valid:false, msg:"This is a required field"};
                else
                    return {valid:true, msg:null};
            }

            function myFilter(item) {
                if (item["percentComplete"] < percentCompleteThreshold)
                    return false;
         
                if (searchString != "" && item["title"].toLowerCase().indexOf(searchString.toLowerCase())==-1 && item["duration"].toLowerCase().indexOf(searchString.toLowerCase())==-1)
                    return false;

                return true;
            }

            function percentCompleteSort(a,b) {
                return a["percentComplete"] - b["percentComplete"];
            }

            function comparer(a,b) {
                var x = a[sortcol], y = b[sortcol];
                return (x == y ? 0 : (x > y ? 1 : -1));
            }

            function addItem(newItem,columnDef) {
                var item = {"num": data.length, "id": "new_" + (Math.round(Math.random()*10000)), "title":"New task", "duration":"1 day", "percentComplete":0, "start":"01/01/2009", "finish":"01/01/2009", "effortDriven":false};
                $.extend(item,newItem);
                dataView.addItem(item);
            }
            
            
            



        

            $(".grid-header .ui-icon")
            .addClass("ui-state-default ui-corner-all")
            .mouseover(function(e) {
                $(e.target).addClass("ui-state-hover")
            })
            .mouseout(function(e) {
                $(e.target).removeClass("ui-state-hover")
            });


            
            $(function()
            {
                // prepare the data
                for (var i=0; i<100; i++) {
                    var d = (data[i] = {});

                    d["id"] = "id_" + i;
                    d["num"] = i;
                    d["title"] = "Task " + i;
                    d["duration"] = (i%6==0 ? "5 days" : "8 days");
                    d["percentComplete"] = Math.round(Math.random() * 100);
                    d["start"] = "01/01/2009";
                    d["finish"] = "01/05/2009";
                    d["effortDriven"] = (i % 5 == 0);
                                
                }


                dataView = new Slick.Data.DataView();
                grid = new Slick.Grid($("#myGrid"), dataView.rows, columns, options);
                var pager = new Slick.Controls.Pager(dataView, grid, $("#pager"));
                var columnpicker = new Slick.Controls.ColumnPicker(columns, grid, options);
                
                
                
                $.subscribe("set_grid_height", function (new_height) {
                    grid_opts.height = new_height;
                    $("#myGrid").css('height', grid_opts.height - 27);
                    grid.resizeCanvas();
                    jjmen();
                });
            
                $.subscribe("set_grid_width", function (new_width) {
                    grid_opts.width = new_width;
                    $("#myGrid").css('width', grid_opts.width );
                    $("#pager").css('width', grid_opts.width  );
                    grid.autosizeColumns();
                    jjmen();
                });


            

                /*   al cambiar el contenido de una celda
                 *   grid.onCellChange = function(row,col,item) {
              dataView.updateItem(item.id,item);    
          };

                      grid.onAddNewRow = addItem;
                 */  //al presionar teclas
                grid.onKeyDown = function(e) {
                    // select all rows on ctrl-a
                    if (e.which != 65 || !e.ctrlKey)
                    {
                        return false;
                    }  

                    var rows = [];
                    selectedRowIds = [];

                    for (var i = 0; i < dataView.rows.length; i++) {
                        rows.push(i);
                        selectedRowIds.push(dataView.rows[i].id);
                    }

                    grid.setSelectedRows(rows);

                    return true;
                };

                grid.onSelectedRowsChanged = function() {
               
                    selectedRowIds = [];
                    var rows = grid.getSelectedRows();
                    for (var i = 0, l = rows.length; i < l; i++) {
                        var item = dataView.rows[rows[i]];
                        if (item) selectedRowIds.push(item.id);
                    }
                };

		
                
                grid.onSort = function(sortCol, sortAsc) {
                    sortdir = sortAsc ? 1 : -1;
                    sortcol = sortCol.field;

                    // using native sort with comparer
                    // preferred method but can be very slow in IE with huge datasets
                    //dataView.sort(comparer,sortAsc);

                    // using temporary Object.prototype.toString override
                    // more limited and does lexicographic sort only by default, but can be much faster

                    var percentCompleteValueFn = function() {
                        var val = this["percentComplete"];
                        if (val < 10)
                            return "00" + val;
                        else if (val < 100)
                            return "0" + val;
                        else
                            return val;
                    };

                    // use numeric sort of % and lexicographic for everything else
                    dataView.fastSort((sortcol=="percentComplete")?percentCompleteValueFn:sortcol,sortAsc);
                
                    jjmen(); 
                
		
                
                
                };

                // wire up model events to drive the grid
                dataView.onRowCountChanged.subscribe(function(args) {
                    grid.updateRowCount();
                    grid.render();
                });

                dataView.onRowsChanged.subscribe(function(rows) {
                    grid.removeRows(rows);
                    grid.render();

                    if (selectedRowIds.length > 0)
                    {
                        // since how the original data maps onto rows has changed,
                        // the selected rows in the grid need to be updated
                        var selRows = [];
                        for (var i = 0; i < selectedRowIds.length; i++)
                        {
                            var idx = dataView.getRowById(selectedRowIds[i]);
                            if (idx != undefined)
                                selRows.push(idx);
                        }

                        grid.setSelectedRows(selRows);
                    }
                });

                dataView.onPagingInfoChanged.subscribe(function(pagingInfo) {
		    
                    grid.setOptions({enableAddRow:options.enableAddRow});
                });
                
                
                $("#txtSearch").keyup(function(e) {
                    Slick.GlobalEditorLock.cancelCurrentEdit();

                    // clear on Esc
                    if (e.which == 27)
                        this.value = "";

                    searchString = this.value;
                    dataView.refresh();
                });


                dataView.beginUpdate();
                dataView.setItems(data);
                dataView.setFilter(myFilter);
                dataView.endUpdate();
                        

                grid.onContextMenu = function (e, row, cell)
                {
                    if (!Slick.GlobalEditorLock.commitCurrentEdit()) { return; }
                            
                    if(selectedRowIds.length <= 1){
                        var rows = [];
                        selectedRowIds = [];
                        rows.push(row);
                        selectedRowIds.push("id_"+rows[0]);
                        grid.setSelectedRows(rows);
                    }

				
                

                    return true;
                };        

                $("#myGrid")
                .bind("draginit", function(e,dd) {
                    var cell = grid.getCellFromEvent(e);
                    if (!cell)
                        return false;

                    dd.row = cell.row;
                    if (!data[dd.row])
                        return false;

                    if (Slick.GlobalEditorLock.isActive() && !Slick.GlobalEditorLock.cancelCurrentEdit())
                        return false;
                });

                var jjmen = function() {
                      
                    $(".slick-row ").jjmenu("rightClick", 
                    // menu items:
                    [ {getByFunction:function(myData) {
                                return [{title:"eliminar: "+myData.tbRow()[0] },
                                    {title:"Duracion: "+myData.tbRow()[1] },
                                    {title:"%Complete: "+myData.tbRow()[2] },
                                    {title:"Start: "+myData.tbRow()[3] }
                                ];
                            }
                        } 
                    ], 
                    // myReplaces / userData:
                    {   "tbRow":function(){
                                            
                            var fila = jQuery(triggerElement);
                            var celdas = [];
                            jQuery(fila).children().each(function() {
                                celdas[celdas.length] = jQuery(this).html();
                                                                                       
                            });
                            if(selectedRowIds.length > 1){
                                celdas[0] ="seleccionados"; 
                            }
                            return celdas;    
                        }
                                          
                    }, 
                    // effects:
                    {show:"show", xposition:"mouse", yposition:"mouse"});
              
                };
                jjmen(); 
                  
                
            });
                
                

        </script>
          
    </head>
    <body>

        <div class="ui-layout-north ui-widget-content" style="display: none;">

            <div id="header">

                <noscript>
                    <div id="slider" class="slider-content slider-error">
                        <h4>Creditable works best with JavaScript enabled.&nbsp;&nbsp;&nbsp;<a href="http://www.iatn.net/help/javascript/" target="_blank">Learn How</a></h4>
                    </div>
                </noscript>


                <div id="header-container" class="container_16">
                    <div class="grid_8 alpha" style="padding: 4px 0;">

                    </div>


                    <div id="userWrap" class="grid_8 omega">
                        <div class="curved-nav user-nav">

                            <ul>
                                <li>
                                    <div class="user-nav-link-wrap">

                                        <a href="/users" class="floatl" style="border:none;">
                                            <img src='http://assets.getcreditable.com/1.2/images/user-default-16__v1.2.png' border='0' alt="trex15" class="avatar-vsm"/>
                                        </a>

                                        <a href="/users" class="floatl" style="border:none;padding:2px 0;">
                                            Profile 
                                        </a> 

                                        <a href="/modal/completeness" rel="facebox" class="profile-completeness"><em>(25% complete)</em></a>


                                        <a href="/profile/index">
                                            Settings
                                        </a>

                                        <a href="/modal/showinvite" rel="facebox" onClick="_gaq.push(['_trackEvent', 'Invite', 'User Menu', 'Show Invite']);">
                                            Invite Friends <span class="points">10</span>
                                        </a>

                                        <a href="/logout/index" style="border:none;">
                                            Logout
                                        </a>

                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>

                    <div id="new-awards-container" class="floatr">
                        <div class="floatl"><a href="/users/newaward" class="floatl marginr">You have new awards!</a><img src='http://assets.getcreditable.com/1.2/images/badges/add-credit-score-sm__v1.2.png' border='0' alt="add-credit-score" class="floatl" title="add credit score"/><img src='http://assets.getcreditable.com/1.2/images/badges/create-budget-sm__v1.2.png' border='0' alt="create-budget" class="floatl" title="create budget"/><img src='http://assets.getcreditable.com/1.2/images/badges/generate-debt-snowball-sm__v1.2.png' border='0' alt="generate-debt-snowball" class="floatl" title="generate debt snowball"/></div>
                    </div>



                    <div class="clearb"></div>
                </div>


            </div>

            <div class="clear"></div>
            <div class="clear"></div>


        </div>

        <div class="ui-layout-south ui-widget-content ui-state-error" style="display: none;"> South Pane </div>

        <div class="ui-layout-center"> 
            <div class="middle-north">
                <div id="page_header">
                    <div class="meta">
                        <h3><span data-translate-text="MY_MUSIC">Indicadores</span>
                            <span class="gridCount" id="gridNumItems">21 Indicadores</span></h3>
                    </div>

                    <div class="page_options">
                        <form class="searchbar right" id="page_search">

                            <input type="text" value="" id="txtSearch" class="search">
                                <a class="remove"></a>

                        </form>

                    </div>
                </div>






            </div>

            <div class="middle-center">

                <div class="inner-center" style="width:100%;float:left;">
                    <div id="myGrid"></div>
                    <div id="pager"></div>
                </div>


            </div> 
        </div>

        <div class="ui-layout-west" style="display: none;">
            <div class="ui-layout-content">
                <div id="tree">

                    <ul>
                        <li rel="root">
                            <a id="nodo1" >Factores</a>

                            <ul>
                                <li rel="create">
                                    <a href="#">Crear</a>
                                </li>
                                <li rel="edit">
                                    <a href="#">Editar</a>
                                </li>
                                <li rel="delete">
                                    <a href="#">Eliminar</a>
                                </li>
                                <li rel="show">
                                    <a href="#">Mostrar</a>
                                </li>

                            </ul>

                        </li>
                        <li rel="root">
                            <a id="nodo2" rel="root" href="#">Caracteristicas</a>
                            <ul>
                                <li rel="create">
                                    <a href="#">Crear</a>
                                </li>
                                <li rel="edit">
                                    <a href="#">Editar</a>
                                </li>
                                <li rel="delete">
                                    <a href="#">Eliminar</a>
                                </li>
                                <li rel="show">
                                    <a href="#">Mostrar</a>
                                </li>
                            </ul>
                        </li>

                        <li rel="root">
                            <a id="nodo3" rel="root" href="#">Indicadores</a>
                            <ul>
                                <li rel="create">
                                    <a href="#">Crear</a>
                                </li>
                                <li rel="edit">
                                    <a href="#">Editar</a>
                                </li>
                                <li rel="delete">
                                    <a href="#">Eliminar</a>
                                </li>
                                <li rel="show">
                                    <a href="#">Mostrar</a>
                                </li>
                            </ul>
                        </li>

                    </ul>

                </div>
            </div>


            <h4 class="ui-widget-content ui-state-hover">Accordion inside DIV.ui-layout-content</h4>
        </div>



    </body>
</html> 